<!--
 * @Date: 2024-03-01 16:25:34
 * @Auth: 873768511@qq.com
 * @LastEditors: 873768511@qq.com
 * @LastEditTime: 2024-03-01 16:46:03
 * @FilePath: \map-screen\src\views\overview\index.vue
-->
<template>
<sacleBox>
  <div class="wrapper">
    <div class="header">渣土车监管一件事概览</div>
    <el-row class="body" justify="space-around">
      <el-col :span="6" clas="left">
        <div class="card">
          <div class="card-title">预警及研判情况</div>
          <leftLine></leftLine>
        </div>
        <div class="card">
          <div class="card-title">预警事件分析</div>
          <leftPie></leftPie>
        </div>
        <div class="card">
          <div class="card-title">各地区预警事件情况</div>
          <leftBar></leftBar>
        </div>
      </el-col>
      <el-col :span="11" clas="center">
        <centerMap></centerMap>
      </el-col>
      <el-col :span="6" class="right">
        <div class="card">
          <div class="card-title">渣土车红黑榜</div>
          <rightBar></rightBar>
        </div>
        <div class="card">
          <div class="card-title">预警事件处置情况</div>
          <rightFunnel></rightFunnel>
        </div>
        <div class="card">
          <div class="card-title">预警事件趋势情况</div>
          <rightLine></rightLine>
        </div>
      </el-col>
    </el-row>
  </div>
</sacleBox>
</template>

<script setup name="overview">
import sacleBox from './components/sacleBox.vue';
import leftLine from './components/leftLine.vue';
import leftPie from './components/leftPie.vue';
import leftBar from './components/leftBar.vue';
import rightBar from './components/rightBar.vue';
import rightFunnel from './components/rightFunnel.vue';
import rightLine from './components/rightLine.vue';
import centerMap from './components/centerMap.vue';
// const url = window.location.href
</script>

<style lang="scss" scoped>
.wrapper{
  background-color: #010e1b;
  height: 100%;
  width: 100%;
  background-image: url("../../assets/screen/bg.png");
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  color: #fff;
}
.header{
  position: absolute;
  height: 160px;
  width: 100%;
  background-image: url("../../assets/screen/top.png");
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: center;
  text-align: center;
  font-size: 40px;
  color: #fff;
}
.body{
  position: absolute;
  top: 100px;
  width: 100%;
  height: calc(100% - 100px);
  .left,.right{
    height: 100%;
    padding: 20px;
  }
}
.card{
  height: 33.3%;
}
.card-title{
  height: 40px;
    width: 100%;
    background-image: url("../../src/assets/screen/box.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    line-height: 40px;
    font-size: 20px;
    text-align: center;
}
</style>